<script lang="ts" setup>
import { AxiosResponse } from "axios";
import { reactive, ref, Ref } from "vue";
import OrgJobSchedulerApi from "@/api/modules/org/bean/job-scheduler";
const OrgJobSchedulerFormRef = ref();
const emit = defineEmits<{
  (e: "add-success", data: any, res: any): void; //保存成功回调
  (e: "update-success", data: any, res: any): void; //更新成功回调
}>();

const props = defineProps({
  /**主键值 */
  uuid: String
});

const OrgJobSchedulerFormData: Ref<any> = ref({
  uuid: props.uuid
});

/** 自定义 任务计划 cron 校验规则 */
const validateTaskPlan = (rule: any, value: String, callback: Function) => {
  if (value == null) {
    callback(new Error("请输入任务计划"));
  } else {
    OrgJobSchedulerApi.getCronNextTime(OrgJobSchedulerFormData.value.taskplan, 5)
      .then(res => {
        let str = "";
        res.data.forEach((element: string) => {
          str += element + "\n";
        });
        OrgJobSchedulerFormState.cronTimeStr = str;
        callback();
      })
      .catch(() => {
        callback(new Error("请检查 任务计划 cron表达式是否正确"));
      });
  }
};

const OrgJobSchedulerFormState = reactive({
  primaryKey: "uuid",
  cronTimeStr: "",

  rules: {
    crontaskname: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
    classname: [{ required: true, message: "请输入类", trigger: "blur" }],
    taskplan: [{ required: true, validator: validateTaskPlan, trigger: "blur" }]
  },

  /** 新增成功 */
  onAddSuccess: (formData: any, res: any) => {
    emit("add-success", formData, res);
  },
  modelFormCallback: {
    afterId: (formData: any) => {
      OrgJobSchedulerApi.getCronNextTime(OrgJobSchedulerFormData.value.taskplan, 5)
        .then((Response: AxiosResponse<Array<any>>) => {
          let str = "";
          Response.data.forEach((element: string) => {
            str += element + "\n";
          });
          OrgJobSchedulerFormState.cronTimeStr = str;
        })
        .catch((Accident: AxiosResponse<any>) => {})
        .finally(() => {});
    }
  }
});

defineExpose({
  save: () => OrgJobSchedulerFormRef.value.save()
});
</script>
<template>
  <jxtech-model-form
    ref="OrgJobSchedulerFormRef"
    :service-api="OrgJobSchedulerApi"
    :primary-key="OrgJobSchedulerFormState.primaryKey"
    :form-data="OrgJobSchedulerFormData"
    :rules="OrgJobSchedulerFormState.rules"
    label-width="130px"
    @add-success="OrgJobSchedulerFormState.onAddSuccess"
    :callback="OrgJobSchedulerFormState.modelFormCallback"
  >
    <el-row>
      <el-col :span="21" :offset="1">
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="任务名称" prop="crontaskname">
              <el-input placeholder="请输入任务名称" v-model="OrgJobSchedulerFormData.crontaskname"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="类" prop="classname">
              <el-input placeholder="请输入类" v-model="OrgJobSchedulerFormData.classname"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="任务计划" prop="taskplan">
              <el-input placeholder="请输入任务计划，例如：0 0 18 L * ?" v-model="OrgJobSchedulerFormData.taskplan"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="是否激活" prop="structId">
              <el-switch
                v-model="OrgJobSchedulerFormData.active"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="是"
                inactive-text="否"
              />
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="任务起始时间" prop="startTime">
              <el-date-picker
                style="width: 100%"
                placeholder="请选择任务起始时间"
                v-model="OrgJobSchedulerFormData.startTime"
                type="datetime"
              ></el-date-picker>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="任务结束时间" prop="endTime">
              <el-date-picker
                style="width: 100%"
                placeholder="请选择任务结束时间"
                v-model="OrgJobSchedulerFormData.endTime"
                type="datetime"
              ></el-date-picker>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="描述" prop="description">
              <el-input
                placeholder="请输入描述"
                v-model="OrgJobSchedulerFormData.description"
                type="textarea"
                show-word-limit
                maxlength="100"
                :rows="3"
              />
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="jobmap参数" prop="jobDataMap">
              <el-input placeholder="请输入json字符串" v-model="OrgJobSchedulerFormData.jobDataMap" type="textarea" :rows="3" />
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="最近5次执行时间">
              <el-input v-model="OrgJobSchedulerFormState.cronTimeStr" type="textarea" :rows="6" disabled />
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </jxtech-model-form>
</template>
